<template>
  <div class="download">
    <div class="layout">
      <div class="page-title">
        <span>下载中心：</span>
      </div>
    </div>
    <div class="download-box">
      <div class="input-name">
        <div>名称：</div>
        <el-input
          v-model="input"
          placeholder="请输入查询标题"
        ></el-input>
        <el-button
          type="primary"
          style="margin-left:20px"
          @click="searchBtnClick()"
        >查询</el-button>
      </div>
      <div class="table">
        <el-table
          :data='tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)'
          border
          style='width: 100%; font-size: 1.3rem; margin: 15px 0'
        >
          <el-table-column
            prop='BT'
            label='名称'
            min-width="200px"
          ></el-table-column>
          <el-table-column
            prop='TIMESTAMP'
            label='时间'
          >
          </el-table-column>
          <!-- <el-table-column prop='loginTime' label='上传时间'></el-table-column> -->
          <el-table-column
            label='操作'
            align="center"
          >
            <template slot-scope="scope">
              <!-- <el-button
                type='danger'
                size="small"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              > 删 除</el-button> -->
              <el-button
                type='success'
                size="small"
                icon="el-icon-download"
                @click="handleDown(scope.row)"
              >
                下载
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15,]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getDownListAPI, getDownlistDelAPI, getDownlistDownAPI } from '@/api/backStage.js';
export default {
    data() {
        return {
            input: '',
            ip: '',
            tableData: [],
            currentPage: 1, //初始页
            pagesize: 10 // 每页的数据
        };
    },
    mounted() {
        this.ready();
        this.getDownList();
    },
    methods: {
        // 获取ip
        ready() {
            let cip = returnCitySN['cip'];
            let cid = returnCitySN['cid'];
            let cname = returnCitySN['cname'];
            this.ip = cip;
        },
        // 获取下载的全部数据
        async getDownList() {
            const res = await getDownListAPI({
                BT: 'null',
                LX: 'null'
            });
            if ((res.code = 'succ')) {
                this.tableData = res.result;
            }
        },
        // 搜索事件
        async searchBtnClick() {
            const res = await getDownListAPI({
                BT: this.input || 'null',
                LX: 'null'
            });
            this.input = '';
            if ((res.code = 'succ')) {
                this.tableData = res.result;
            }
        },
        // 删除
        // async handleDelete(row) {
        //     const res = await getDownlistDelAPI({
        //         token: this.$store.state.user.token,
        //         ID: row.ID,
        //         OPRID: this.$store.state.user.oprid,
        //         IP: this.ip
        //     });
        //     if (res.code == 'succ') {
        //         this.$message.success('删除成功');
        //         this.getDownList();
        //     }
        // },
        async handleDown(row) {
            const res = await getDownlistDownAPI({
                ID: row.ID
            });
            if (res.code == 'succ') {
                // this.url = res.result;
                this.$message.success(res.message);
                let index = res.result.lastIndexOf('.');
                let a = res.result.substring(index + 1, res.result.length);
                if (a == 'txt') {
                    // const ele = document.createElement('a');
                    // ele.setAttribute('href', res.result);
                    // // element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(res.result));
                    // const str = res.result.substring(res.result);
                    // ele.setAttribute('download', str);
                    // ele.click();
                    window.open(res.result);
                } else {
                    const ele = document.createElement('a');
                    ele.setAttribute('href', res.result);
                    // element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(res.result));
                    const str = res.result.substring(res.result);
                    ele.setAttribute('download', str);
                    ele.click();
                    // window.open(res.result);
                }
            }
        },
        async handleDown(row) {
            const res = await getDownlistDownAPI({
                ID: row.ID
            });
            if (res.code == 'succ') {
                this.$message.success(res.message);
                // window.open(res.result);
                const ele = document.createElement('a');
                ele.setAttribute('href', res.result);
                const str = res.result.substring(res.result);
                ele.setAttribute('download', str);
                ele.click();
            }
        },
        // 分页
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
            this.pagesize = size;
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
        }
    }
};
</script>
<style scoped>
.download {
    width: 100%;
    min-height: 100vh;
    font-size: 1.3rem;
}
.download-box {
    width: 90%;
    margin: 20px auto;
    padding: 15px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.input-name {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 15px auto;
}
.table {
    width: 100%;
    margin: 0 auto;
}
::v-deep .el-input {
    width: 20% !important;
}

::v-deep .el-input--small .el-input__inner {
    height: 42px;
    line-height: 42px;
}
</style>